<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 注册页面 </title>
    <!--  引入外部样式-->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link type="text/css" rel="stylesheet" href="./css/register.css"/>
</head>
<body>
<div style="text-align: center">
    <div class="head">
        <img src="images/logo_register.png" alt="" id="logo">
        <span style="color: #01b6eb; font-size: 35px; position: absolute; top:40px; left: 110px">_憩息阁_</span>
    </div>

    <div class="register">
        <div id="form">
            <div>
                <span><img src="images/user.png" alt="" id="username_logo"></span>
                <input type="text" class="ipt" name="username" id="username" value="">
                <img src="images/right.png" alt="" id="username_logo_right">
                <span id="prompt_username"></span>
                <div id="mes_username"> 用户名为5~20位</div>
            </div>

            <div>
                <span><img src="images/pwd.png" alt="" id="pwd_logo"></span>
                <input type="password" class="ipt" name="password" id="password" autocomplete="true">
                <img src="images/right.png" alt="" id="password_logo_right">
                <span id="prompt_password"></span>
                <div id="mes_password"> 密码长度为8~16位</div>
            </div>

            <div>
                <img src="images/date.png" alt="" id="date_logo">
                <input type="date" class="ipt" name="date" id="date">
            </div>
            <input type="submit" id="submit" value=" 注             册 ">

            <div id="backToIndex">
                <a href="/HomePage.html">返回主页面</a>
            </div>

            <div id="goLogin">
                <span>已有账号？</span><a href="/login.html">点击我去登录</a>
            </div>

        </div>
    </div>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">

    var username = document.getElementById("username");
    username.addEventListener('blur', function () {
        var user = {
            userName: "",
            userPassWord: "",
            userDate: ""
        }
        let userName = document.getElementById('username').value;
        user.userName = userName;
        let userPassWord = document.getElementById('password').value;
        user.userPassWord = userPassWord;
        let userDate = document.getElementById('date').value;
        user.userDate = userDate;
        axios({
            method: 'post',
            url: "/checkUM",
            data: user
        }).then(resp => {
            if (resp.data === "usable") {
                document.getElementById("username_logo_right").style.display = "block";
                document.getElementById("prompt_username").innerText = "";
            } else {
                document.getElementById("prompt_username").innerText = resp.data;
                document.getElementById("username_logo_right").style.display = "none";
            }
        })
    })

    var password = document.getElementById("password");
    password.addEventListener('blur', function () {
        var pwd_len = password.value.length;
        var pwd = password.value;
        if (pwd_len > 16 || pwd_len < 8) {
            if (pwd_len === 0) {
                document.getElementById("password_logo_right").style.display = "none";
            } else {
                document.getElementById("prompt_password").innerText = "密码不合法";
                document.getElementById("password_logo_right").style.display = "none";
            }
        } else {
            if (pwd.replace(/\s*/g, "").length === 0) {
                document.getElementById("prompt_password").innerText = "密码不能为空格";
                document.getElementById("password_logo_right").style.display = "none";
            } else if (pwd.replace(/\s*/g, "").length < 8) {
                document.getElementById("prompt_password").innerText = "密码不合法";
                document.getElementById("password_logo_right").style.display = "none";
            } else {
                document.getElementById("prompt_password").innerText = "";
                document.getElementById("password_logo_right").style.display = "block";
            }
        }
    })

    //键盘事件
    document.addEventListener('keydown', function (event) {
        if (event.key==='Enter') {
            var user = {
                userName: "",
                userPassWord: "",
                userDate: ""
            }
            let userName = document.getElementById('username').value;
            user.userName = userName;
            let userPassWord = document.getElementById('password').value;
            user.userPassWord = userPassWord;
            let userDate = document.getElementById('date').value;
            user.userDate = userDate;
            axios({
                url: "/register",
                method: "post",
                data: {
                    "user": user
                }
            }).then(resp => {
                if (resp.data === "注册成功") {
                    if (confirm("注册成功！是否立即跳转登录页面")) {
                        setTimeout(function () {
                            location.href = "/login.html";
                        }, 500)
                    }
                } else if (resp.data === "密码为空或者全为空格" || resp.data === "密码不合法") {
                    document.getElementById("prompt_password").innerText = resp.data;
                } else {
                    document.getElementById("prompt_username").innerText = resp.data;
                }
            })
        }
    })


    var submit = document.getElementById("submit");
    submit.addEventListener('click', function () {
        var user = {
            userName: "",
            userPassWord: "",
            userDate: ""
        }
        let userName = document.getElementById('username').value;
        user.userName = userName;
        let userPassWord = document.getElementById('password').value;
        user.userPassWord = userPassWord;
        let userDate = document.getElementById('date').value;
        user.userDate = userDate;
        axios({
            url: "/register",
            method: "post",
            data: {
                "user": user
            }
        }).then(resp => {
            if (resp.data === "注册成功") {
                if (confirm("注册成功！是否立即跳转登录页面")) {
                    setTimeout(function () {
                        location.href = "/login.html";
                    }, 500)
                }
            } else if (resp.data === "密码为空或者全为空格" || resp.data === "密码不合法") {
                document.getElementById("prompt_password").innerText = resp.data;
            } else {
                document.getElementById("prompt_username").innerText = resp.data;
            }
        })
    })

</script>
</body>
</html>